<html>
<head>
	<title>pippo</title>
	<script type="text/javascript" src="../liwe.js"></script>
	<script type="text/javascript" src="../utils.js"></script>
	<script type="text/javascript" src="../object_enh.js"></script>
	<script type="text/javascript" src="../json.js"></script>
	<script type="text/javascript" src="../history.js"></script>

	<style type="text/css">
	.page {
		border: 1px solid black;
		width: 300px;
		height: 300px;

		display: none;
	}
	</style>

	<script type="text/javascript">
	function _hide_all ()
	{
		$( "p1" ).style.display = 'none';
		$( "p2" ).style.display = 'none';
		$( "p3" ).style.display = 'none';
	}
	function page1 ()
	{
		liwe.history.add_module ( "test1", { "_page": 1 }, { "hello": "world" }  );

		_hide_all ();
		$( "p1" ).style.display = "block";
	}

	function page2 ()
	{
		liwe.history.add_module ( "test1", { "_page": 2 }, { "hello2": "world2" }  );
		_hide_all ();
		$( "p2" ).style.display = "block";
	}

	function page3 ()
	{
		liwe.history.add_module ( "test1", { "_page": 3 }, { "hello3": "world3" }  );

		_hide_all ();
		$( "p3" ).style.display = "block";
	}

	function hist_listener ( dict, data )
	{
		var p = dict.get ( "_page", "1" );
		
		switch ( parseInt ( p, 10 ) )
		{
			case 1:
				page1 ();
				break;
			case 2:
				page2 ();
				break;

			case 3:
				page3 ();
				break;
		}
	}

	function init ()
	{
		liwe.history.set_listener ( hist_listener, "test1" );
		liwe.history.init ();
	}
	</script>
</head>
<body onload="init()">

<a href="javascript:page1()">Page 1</a>
<a href="javascript:page2()">Page 2</a>
<a href="javascript:page3()">Page 3</a>

<div id="p1" class="page">Page 1</div>
<div id="p2" class="page">Page 2</div>
<div id="p3" class="page">Page 3</div>



</body>
</html>
